<template>
  <v-chart
    v-if="config && showChart"
    ref="chart"
    :style="{
      width: chartWidth + 'px',
      height: chartHeight + 'px',
    }"
    :option="option"
    @click="handleChartClick"
  />
</template>

<script setup>
// import vue apis
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";

// import stores
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";

// import echarts
import * as echarts from "echarts/core";
// import { use } from "echarts/core";

// import * as echarts from "echarts/core";
import "echarts/lib/component/polar";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import {
  BarChart,
  LineChart,
  ScatterChart,
  EffectScatterChart,
} from "echarts/charts";
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PolarComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";

echarts.use([
  CanvasRenderer,
  // SVGRenderer,
  BarChart,
  LineChart,
  ScatterChart,
  EffectScatterChart,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PolarComponent,
  LabelLayout,
  UniversalTransition,
]);

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const seriesData = computed(() => props.data);

const flowStore = useFlowStore();
const commonStore = useCommonStore();
const chartObject = ref("chart");
const config = computed(() => flowStore.chartConfig.ratesChart);

const showChart = ref(true);
const refresh = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
};
defineExpose({ refresh });

const staticConfig = {
  barOpacity: 0.9,
  itemStyle: {
    borderRadius: 8,
    borderColor: commonStore.darkMode
      ? "rgba(255,255,255,0.5)"
      : "rgba(0,0,0,0.3)",
    borderWidth: 2,
    width: "20px",
  },
  emphasisConfig: {
    disabled: false,
    // scale: true,
    // focus:'none',
    // focus: "self",
    // focus: config.value && config.value.chartEmphasis ? "series" : "none",
    focus: "series",
  },
  labelConfig: {
    show: true,
    formatter: (item) => (item.value == 0 ? "" : item.value),
    // color: commonStore.darkMode ? "#000" : "#FFF",
    color: commonStore.darkMode ? "#fff" : "#000",
    textBorderColor: commonStore.darkMode ? "#000a" : "fffa",
    textBorderWidth: 2,
    fontSize: "12px",
    fontWeight: "bold",
    distance: 4,
  },
  labelConfig2: {
    show: true,
    formatter: (item) => (item.value == 0 ? "" : item.value),
    color: commonStore.darkMode ? "#fff" : "#000",
    textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
    textBorderWidth: 1,
    textShadowColor: commonStore.darkMode ? "#000" : "#fff",
    textShadowBlur: 4,
    textShadowOffsetY: 1,
    fontSize: "12px",
    fontWeight: "bold",
  },
  barMinHeight: 20,
  lineStyle: {
    opacity: 0.5,
    width: 10,
  },
  smooth: true,
  barZ: 10,
  lineZ: 11,
  lineAlphaUppper: "0.35",
  lineAlphaLower: "0.05",
  rgbZUMY: "135, 0, 157",
  rgbZUTF: "128, 255, 165",
  rgbZUUU: "64, 96, 255",
};

const chartWidth = computed(
  () => props.data.moment.length * config.value.chartSize + 120
);

const chartHeight = computed(() => commonStore.clientHeight - 179);

const computedSymbolSize = (value) => {
  if (config.value.chartType == "line") {
    return 4;
  } else {
    // return Math.max(value * 4, 12);
    return value * 4;
  }
};

const option = computed(() => {
  let res = seriesData.value;

  return {
    grid: {
      x: 40,
      y: 60,
      x2: 40,
      y2: 40,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: { type: "cross" },
    },

    xAxis: { type: "category", data: res.scaleX },
    yAxis: [
      {
        id: 0,
        type: "value",
        name: "起飞正常率",
        position: "left",
        axisLine: { show: true },
        max: 100,
        min: 0,
      },
    ],
    series: [
      // {
      //   name: "ZUUU起飞正常率(小时)",
      //   data: res.data.zuuu.h,
      //   type: "bar",
      //   yAxisIndex: 0,
      //   coordinateSystem: "cartesian2d",
      //   smooth: staticConfig.smooth,
      //   emphasis: staticConfig.emphasisConfig,
      //   barMinHeight: staticConfig.barMinHeight,
      //   label: staticConfig.labelConfig2,
      //   lineStyle: {
      //     // color: "#3498DB",
      //     color: "rgb(64, 96, 255)",
      //     width: 2,
      //   },
      //   itemStyle: {
      //     // color: "#3498DB",
      //     color: "rgb(64, 96, 255)",
      //     opacity: staticConfig.barOpacity,
      //     ...staticConfig.itemStyle,
      //   },
      //   z: staticConfig.barZ,
      //   animationDelay: function (idx) {
      //     return idx * 50 + 100;
      //   },
      // },
      // {
      //   name: "ZUTF起飞正常率(小时)",
      //   data: res.data.zutf.h,
      //   type: "bar",
      //   yAxisIndex: 0,
      //   coordinateSystem: "cartesian2d",
      //   smooth: staticConfig.smooth,
      //   emphasis: staticConfig.emphasisConfig,
      //   barMinHeight: staticConfig.barMinHeight,
      //   label: staticConfig.labelConfig2,
      //   lineStyle: {
      //     // color: "#2ECC71",
      //     color: "rgb(128, 255, 165)",
      //     width: 2,
      //   },
      //   itemStyle: {
      //     // color: "#2ECC71",
      //     color: "rgb(128, 255, 165)",
      //     opacity: staticConfig.barOpacity,
      //     ...staticConfig.itemStyle,
      //   },
      //   z: staticConfig.barZ,
      //   animationDelay: function (idx) {
      //     return idx * 50 + 100;
      //   },
      // },
      // {
      //   name: "ZUMY起飞正常率(小时)",
      //   data: res.data.zumy.h,
      //   type: "bar",
      //   yAxisIndex: 0,
      //   coordinateSystem: "cartesian2d",
      //   smooth: staticConfig.smooth,
      //   emphasis: staticConfig.emphasisConfig,
      //   barMinHeight: staticConfig.barMinHeight,
      //   label: staticConfig.labelConfig2,
      //   lineStyle: {
      //     // color: "#9B59B6",
      //     color: "rgb(135, 0, 157)",
      //     width: 2,
      //   },
      //   itemStyle: {
      //     // color: "#9B59B6",
      //     color: "rgb(135, 0, 157)",
      //     opacity: staticConfig.barOpacity,
      //     ...staticConfig.itemStyle,
      //   },
      //   z: staticConfig.barZ,
      //   animationDelay: function (idx) {
      //     return idx * 50 + 100;
      //   },
      // },
      config.value.type == "" || config.value.type == "ZUMY"
        ? {
            name: "ZUMY起飞正常率",
            data:
              config.value.time == "day" ? res.data.zumy.d : res.data.zumy.h,
            type: "line",
            yAxisIndex: 0,
            coordinateSystem: "cartesian2d",
            smooth: staticConfig.smooth,
            emphasis: staticConfig.emphasisConfig,
            label: staticConfig.labelConfig,
            lineStyle: {
              color: `rgb(${staticConfig.rgbZUMY})`,
            },
            itemStyle: {
              color: `rgb(${staticConfig.rgbZUMY})`,
            },
            z: staticConfig.lineZ,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `rgba(${staticConfig.rgbZUMY}, ${staticConfig.lineAlphaUppper})`,
                },
                {
                  offset: 1,
                  color: `rgba(${staticConfig.rgbZUMY}, ${staticConfig.lineAlphaLower})`,
                },
              ]),
            },
            clip: false,
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          }
        : null,
      config.value.type == "" || config.value.type == "ZUUU"
        ? {
            name: "ZUUU起飞正常率",
            data:
              config.value.time == "day" ? res.data.zuuu.d : res.data.zuuu.h,
            type: "line",
            yAxisIndex: 0,
            coordinateSystem: "cartesian2d",
            smooth: staticConfig.smooth,
            emphasis: staticConfig.emphasisConfig,
            label: staticConfig.labelConfig,
            lineStyle: {
              color: `rgb(${staticConfig.rgbZUUU})`,
            },
            itemStyle: {
              color: `rgb(${staticConfig.rgbZUUU})`,
            },
            z: staticConfig.lineZ,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `rgba(${staticConfig.rgbZUUU}, ${staticConfig.lineAlphaUppper})`,
                },
                {
                  offset: 1,
                  color: `rgba(${staticConfig.rgbZUUU}, ${staticConfig.lineAlphaLower})`,
                },
              ]),
            },
            clip: false,
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          }
        : null,
      config.value.type == "" || config.value.type == "ZUTF"
        ? {
            name: "ZUTF起飞正常率",
            data:
              config.value.time == "day" ? res.data.zutf.d : res.data.zutf.h,
            type: "line",
            yAxisIndex: 0,
            coordinateSystem: "cartesian2d",
            smooth: staticConfig.smooth,
            emphasis: staticConfig.emphasisConfig,
            label: staticConfig.labelConfig,
            lineStyle: {
              color: `rgb(${staticConfig.rgbZUTF})`,
            },
            itemStyle: {
              color: `rgb(${staticConfig.rgbZUTF})`,
            },
            z: staticConfig.lineZ,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `rgba(${staticConfig.rgbZUTF}, ${staticConfig.lineAlphaUppper})`,
                },
                {
                  offset: 1,
                  color: `rgba(${staticConfig.rgbZUTF}, ${staticConfig.lineAlphaLower})`,
                },
              ]),
            },
            clip: false,
            animationDelay: function (idx) {
              return idx * 50 + 100;
            },
          }
        : null,
    ],
    darkMode: commonStore.darkMode,
    animationEasing: "elasticOut",
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
  };
});

const handleChartClick = () => {};
</script>
